<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../js/getParameter.js"></script>

    <style type="text/css">

        ul li {
            float: left;
            list-style: none;
            border: 0.5px solid black;
            text-align: center;
            line-height: 30px;
            height: 30px;
            width: 40px;
        }

        #title {
            background-color: cornflowerblue;
        }

        .row-margin-top {
            margin: 15px;
        }

        html {
            overflow-x: hidden;
            overflow-y: auto;
        }

        p {
            margin: 10px;
            font-family: 微软雅黑;
            font-size: large;
            border: 3px solid black;
            border-radius: 10px;
            text-align: center;
        }

        #myInfo {
            font-family: 微软雅黑;
            font-size: large;
            color: blue;
        }

        tr {
            height: 30px;
        }

        th {
            width: 100px;
            text-align: center;
        }

        td {
            width: 100px;
            text-align: center;
        }

        #off {
            margin-top: 10px;
            font-family: 微软雅黑;
            color: black;
        }

        body {
            background-image: url("../images/refund.jpg");
            background-repeat: no-repeat; /*设置图片不重复*/
            background-size: cover; /*设置图片平铺*/
        }
    </style>
    <script>
        $(function () {
            $.ajax({
                type: "post",
                url: "../play/userLogin",
                success: function (userLogin) {
                    var userId = userLogin.userId;

                    tickets(userId, 1, 1)
                    $("#submit").click(function () {
                        if (confirm("确认退票？")) {
                            var ticketId = $("#submit").attr("ticketId");

                            $.ajax({
                                url: "../ticket/returnTicket",
                                type: "post",
                                data: {"ticketId": ticketId},
                                success: function (data) {
                                    alert(data)
                                    location.href = "playView.html"
                                },
                                dataType: "json"
                            })
                            // location.href="refundView.html";
                            // location.reload();
                        }
                    })
                },
                dataType: "json"
            })

        })


        function tickets(userId, currentPage, rows) {
            $.ajax({
                url: "../ticket/findPage",
                data: {"userId": userId, "currentPage": currentPage, "rows": rows},
                type: "post",
                success: function (data) {

                    $("#totalPage_span").html(data.totalPage)
                    $("#totalCount_span").html(data.totalCount)


                    console.log(11)
                    //共有的页数和条数
                    $("#totalPage_span").html(data.totalPage);
                    $("#totalCount_span").html(data.totalCount);

                    //判断上一页
                    var prePage = currentPage - 1;
                    if (prePage < 1) {
                        prePage = 1
                    }

                    //判断下一页
                    var nextPage = currentPage + 1;
                    if (nextPage > data.totalPage) {
                        nextPage = data.totalPage
                    }

                    //第几页的拼接
                    var routePage_ul = ''
                    routePage_ul += ' <li><a href="javascript:tickets(' + userId + ',' + rows + ')">首页</a></li>\n' +
                        '                    <li class="threeword"><a href="javascript:tickets(' + userId + ',' + prePage + ',' + rows + ')">上一页</a></li>'
                    for (var i = 1; i <= data.totalPage; i++) {

                        if (currentPage == i) {
                            routePage_ul += '<li class="curPage"  onclick="tickets(' + userId + ',' + i + ',' + rows + ')"><a href="javascript:tickets(' + userId + ',' + i + ',' + rows + ')">' + i + '</a></li>';
                        } else {
                            routePage_ul += '<li ><a href="javascript:tickets(' + userId + ',' + i + ',' + rows + ')">' + i + '</a></li>';

                        }


                    }
                    routePage_ul += ' <li class="threeword"><a href="javascript:tickets(' + userId + ',' + nextPage + ',' + rows + ')">下一页</a></li>\n' +
                        '                    <li class="threeword"><a href="javascript:tickets(' + userId + ',' + data.totalPage + ',' + rows + ')">末页</a></li>'

                    $("#routePage_ul").html(routePage_ul)

                    if (data.list.length == 0) {
                        alert("您还未购票，请先购票！")
                        location.href = "playView.html"
                        return;
                    }
                    var list = data.list;
                    $.each(list, function (ind, ele) {

                        $("#submit").attr("ticketId", ele.ticketId);
                        $("#ticketId_span").html(ele.ticketId)
                        $("#playName_span").html(ele.play.playName)
                        $("#schedule_span").html(ele.schedule.scheduleId)
                        $("#startTime_span").html(ele.schedule.startTime)
                        $("#price_span").html(ele.ticketPrice)
                        $("#time_span").html(ele.ticketTime)


                    })


                },
                dataType: "json"
            })

        }


    </script>
</head>
<body>

<!--页面主体-->
<!--主体-->
<div class="container-fluid">
    <div class="row " id="title">
        <div class="col-md-1 row-margin-top">
            <a href="playView.html">
                <button class="btn btn-info btn-lg active"><span class="glyphicon glyphicon-align-justify"
                                                                 aria-hidden="true"></span>&nbsp;首页
                </button>
            </a>

        </div>
        <div class="col-md-5 col-md-offset-3">
            <h1>欢 迎 光 临 T T M S 影 院</h1>
        </div>

        <div class="col-md-1 col-md-offset-3 row-margin-top">
            <a href="myInfo.html">
                <button id="myInfo" class="btn btn-link btn-lg "><span class="glyphicon glyphicon-user"
                                                                       aria-hidden="true"></span>&nbsp;
                </button>
            </a>
        </div>

        <div class="col-md-1 row-margin-top">
            <a href="../index.html">
                <button id="off" class="btn btn-link  "><span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp;注销
                </button>
            </a>
        </div>
    </div>

    <div class="row ">
        <div class="col-md-4 col-md-offset-5">
            <h1>我的电影票</h1>
        </div>
    </div>


    <div class="row">
        <div class=" col-md-3 col-md-offset-8" id="return_ticket">
            <button id="submit" class=" btn   btn-success"><span class="glyphicon  glyphicon-ok-sign"></span>退票</button>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <table id="ticket_table" class="table table-bordered table-striped">
                <thead id="ticket_the">
                <tr>
                    <th colspan="2">电影票</th>
                </tr>
                <tr>
                    <td>
                        <label>电影票ID</label>
                    </td>
                    <td>
                        <span id="ticketId_span"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <label>电影</label>
                    </td>
                    <td>
                        <span id="playName_span"></span>
                    </td>
                </tr>


                <tr>
                    <td>
                        <label>演出厅</label>
                    </td>
                    <td>
                        <span id="schedule_span"></span>
                    </td>
                </tr>


                <tr>
                    <td>
                        <label>开始时间</label>
                    </td>
                    <td>
                        <span id="startTime_span"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <label>票价</label>
                    </td>
                    <td>
                        <span id="price_span"></span>
                    </td>
                </tr>


                <tr>
                    <td>
                        <label>购票时间</label>
                    </td>
                    <td>
                        <span id="time_span"></span>
                    </td>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <ul id="ticketPage_ul"></ul>
            <!--<nobr id="ticketPage_ul"></nobr>-->
        </div>
    </div>

    <div class="row ">
        <!-- 分页条信息 -->
        <div id="page_nav" class="col-md-4 col-md-offset-5">
        </div>
    </div>

    <div class="row row-margin-top">
        <!--分页信息  -->
        <div id="page_info" class="col-md-4 col-md-offset-5">

            </ul>
            <div class="page_num_inf">共
                <span id="totalPage_span">1</span>页<span id="totalCount_span">1</span>张
            </div>
            <nav>
                <div class="pageNum">
                    <ul id="routePage_ul" class="pagination">

                    </ul>
                </div>
            </nav>

        </div>
    </div>
</div>
</body>
</html>